<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "likeItem",
});
</script>
<script setup lang="ts">
import { reactive, ref, withDefaults, toRefs, inject, onMounted } from "vue";
import { Router } from "@/utils/router";
import love1 from "@/package/famous-talk/static/love1.png";
import love2 from "@/package/famous-talk/static/love2.png";
import Comment2 from "./comment2.vue";
import { common_like } from "../../api/guider";
import { AppData } from "@/utils/app";
import { Account } from "@/utils/account";
type dataType = {
  id: number;
  like_count: string;
};
const props = withDefaults(defineProps<dataType>(), {
  like_count: "",
});
const emit = defineEmits(["love"]);
const config: any = inject("likeConfig");
const isLove = ref(false);
onMounted(() => {
  isLoveFn();
});
const isLoveFn = () => {
  isLove.value = config.likeConfig.guider_interview_like.includes(props.id);
};

const loveClick = () => {
  config.istoLogin(oprate);
};
const oprate = () => {
  common_like({
    id: props.id,
    type: 3,
  }).then(() => {
    emit("love", isLove.value);
    config.getConfig().then(() => {
      isLoveFn();
    });
  });
};
</script>

<template>
  <view class="item1111">
    <image
      :src="isLove ? love1 : love2"
      mode="scaleToFill"
      @click="loveClick"
    />
    <text v-if="props.like_count">{{ props.like_count }}</text>
    <text v-else>点赞</text>
  </view>
</template>

<style lang="scss">
.item1111 {
  display: flex;
  align-items: center;
  image {
    width: 36rpx;
    height: 36rpx;
    margin-right: 14rpx;
  }
  text {
    font-size: 24rpx;
    color: #666666;
    line-height: 34rpx;
  }
}
</style>
